<template>
  <div class="inner-container">
    <div class="section-title">基本信息</div>
    <!-- --------------------------------------------------修改表单-------------------------------------------------------- -->
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="82px">
      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="客户类型" prop="type">
            <el-select v-model="formData.type" >
              <el-option  v-for="item in customerTypeArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入客户名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户性别" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio value="1">男</el-radio>
              <el-radio value="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formData.age" placeholder="请输入客户年龄"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="formData.contactPhone" placeholder="请输入联系电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="formData.idNumber" placeholder="请输入身份证号"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="紧急电话" prop="emergencyPhone">
            <el-input v-model="formData.emergencyPhone" placeholder="请输入紧急电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <el-input v-model="formData.emergencyContact" placeholder="请输入紧急联系人"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="楼盘名称" prop="propertyName">
            <el-input v-model="formData.propertyName" placeholder="请输入楼盘名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="户型" prop="houseType">
            <el-select v-model="formData.houseType">
              <el-option  v-for="item in customerHouseTypeArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="面积" prop="houseSize">
            <el-input v-model="formData.houseSize" placeholder="请输入面积"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-row>
            <el-col :md="10" :sm="16">
              <el-form-item label="楼盘地址" prop="province">
                <el-select v-model="formData.province" @change="loadCity" class="no-border-select">
                  <el-option v-for="item in provinceArr " :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="7" :sm="4">
              <el-form-item prop="city" label-width="5">
                <el-select v-model="formData.city" @change="loadDistrict">
                  <el-option v-for="item in CityArr " :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="7" :sm="4">
              <el-form-item prop="district" label-width="5">
                <el-select v-model="formData.district">
                  <el-option v-for="item in districtArr "  :label="item.name" :value="item.id"></el-option>
                  <el-option value="" label=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="propertyAddr" label-width="0">
            <el-input v-model="formData.propertyAddr" placeholder="详细地址"/>
          </el-form-item>
        </el-col>
      </el-row>
      <br>

      <el-form-item>
        <el-button type="primary" @click="saveCustomer">保存</el-button>
        <el-button @click="$router.push('/crm/customer')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from "vue-router";
import request from "@/utils/request";

const route = useRoute()
const router = useRouter()

// --------------------------------------------------
const formRef = ref()

const formRules = ref({
  type: [{required: true, message: '客户类型为必选项'}],
  name: [{required: true, message: '客户名称为必填项'}],
  contactPhone: [{required: true, message: '联系电话为必填项'}],
  propertyName: [{required: true, message: '楼盘名称为必填项'}],
  houseType: [{required: true, message: '户型为必选项'}],
  houseSize: [{required: true, message: '面积为必填项'}],
  province: [{required: true, message: '省份为必选项'}],
  city: [{required: true, message: '城市为必选项'}],
  propertyAddr: [{required: true, message: '详细地址为必填项'}],
})


const formData = ref({
  status: '',
  type: '',
  name: '',
  gender: '',
  age: '',
  contactPhone: '',
  idNumber: '',
  emergencyPhone: '',
  emergencyContact: '',
  propertyName: '',
  houseType: '',
  houseSize: '',
  province: '',
  city: '',
  district: '',
  propertyAddr: ''

})


//定义数组用来保存车辆类型字典项
const customerStatusArr = ref([]);
const customerTypeArr = ref([]);
const customerSourceArr = ref([]);
const customerHouseTypeArr = ref([]);
onMounted(()=>{
  loadProvince()
  loadDictOptions(customerTypeArr,'customer_type');
  loadDictOptions(customerStatusArr,'customer_status');
  loadDictOptions(customerSourceArr,'customer_source');
  loadDictOptions(customerHouseTypeArr,'house_type');
})



//定义省份数组
const provinceArr = ref([]);
//定义城市数组
const CityArr = ref([]);
//定义区县数组
const districtArr = ref([]);
//加载区县
const loadDistrict = (parentId)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId='+parentId).then(res=>{
    districtArr.value = res.data
    //console.log(districtArr.value)
  })
}
//加载城市
const loadCity = (parentId)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId='+parentId).then(res=>{
    CityArr.value = res.data
    //console.log(CityArr.value)
    //console.log(formData.value.province)
  })
}
//加载省份
const loadProvince = (parentId)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId=0').then(res=>{
    ///console.log(res.data)
    provinceArr.value = res.data

  })
}


const fileList = ref([]);
const saveCustomer = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    request.post('/api/crm/customer/add', formData.value).then(res => {
      ElMessage.success('修改成功')
      //console.log(formData.value)
      router.push('/crm/customer')
    })
  })
}

//表单回显
const imgPath = ref('')
const loadCustomer = () => {
  let id = route.query.id
  request.get( '/api/crm/customer/selectEditCustomer?id='+id).then(res => {
    formData.value = res.data[0];
    //console.log(formData.value);
    loadCity(formData.value.province)
    loadDistrict(formData.value.city)

    //图片回显
    /*for( let i= 0; i<res.data.list[0].imgUrl.length;i++){
      imgPath.value = BASE_URL+res.data.list[0].imgUrl[i];
      fileList.value.push({
        name:'img'+i,
        url:imgPath.value
      })
    }*/
    //console.log(fileList.value)

  })
}

onMounted(() => {
  loadCustomer()
})


/**图片上传相关代码开始**/
/*const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const customerImgUrl = ref(BASE_URL + '/api/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  //console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  request.post('/api/file/remove?imgUrl=' + imgUrl).then(res => {
    ElMessage.success('删除成功')
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  //console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}*/



/**图片上传相关代码结束**/

</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}
</style>
